<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu Bar Widget</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
div {
	clear: both;
}
hr {
}
#MenuBar3 li a {
	background-color: transparent;
}
#MenuBar3 a:hover, #MenuBar3 a:focus {
	background-image: url(images/itemgradient-hover.gif);
	background-repeat: repeat-x;
}
#MenuBar3 a.MenuBarItemHover, #MenuBar3 a.MenuBarItemSubmenuHover, #MenuBar3 a.MenuBarSubmenuVisible {
	background-image: url(images/itemgradient-hover.gif);
	background-repeat: repeat-x;
}
#MenuBar3 li {
	background-image: url(images/itemgradient.gif);
	background-repeat: repeat-x;
}
#MenuBar4 li {
	width: 15em;
}
#MenuBar4 ul, #MenuBar4 ul li {
	width: 20em;
}
#MenuBar5 li {
	width: auto;
	white-space: nowrap;
}
#MenuBar5 ul {
	width: auto;
}
#MenuBar5 ul li {
	float: none;
	background-color: transparent;
}
#MenuBar5 a.MenuBarItemSubmenu {
	background-position: 100% 50%;
}
#MenuBar6 a {
	background-color: #FC0;
	padding-left: 1.5em;
}
#MenuBar6 a:hover {
	background-color: #FF0;
	color: #F00;
}
#MenuBar6 a.MenuBarItemSubmenu {
	background-image: url(images/star.gif);
	background-position: 5% 50%;
}
#MenuBar6 a.MenuBarItemSubmenuHover {
	background-image: url(images/star-hover.gif);
	background-position: 5% 50%;
	background-color: #FF0;
	color: #F00;
}
#MenuBar7 li {
	width: 10em;
}
#MenuBar7 ul, #MenuBar7 ul li {
	width: 15em;
}
#MenuBar7 span {
	margin: 0;
	padding: 2px;
	padding-left: 22px;
	display: block;
	background-position: 0% 50%;
	background-repeat: no-repeat;
}
#MenuBar7 #item1 {
	background-image: url(images/numberedList.gif);
}
#MenuBar7 #item1-1 {
	background-image: url(images/italic.gif);
}
#MenuBar7 #item3 {
	background-image: url(images/home.gif);
}
#MenuBar7 #item3-1 {
	background-image: url(images/forward.gif);
}
#MenuBar7 #item3-3 {
	background-image: url(images/justifyAlign.gif);
}
#MenuBar7 #item3-1-1 {
	background-image: url(images/new.gif);
}
#MenuBar8 a{
	background-color:#FF6A22;
}

#MenuBar8 ul li a{
	background-color:#FFA87D;
}
#MenuBar8 ul li ul li a{
	background-color:#FFCEB7;
}
/*ul#MenuBar9{
	width:10em;
}
ul#MenuBar9 ul{
	width:10em;
	margin: -2% 0 0 95%;
}
	
ul#MenuBar9 li a{
	background-image:url(images/img_bg.gif);
	width:100px;
	border:none;
	
}
ul#MenuBar9 li a.MenuBarItemSubmenu{
	background-image:url(images/img_bg_arrow.gif);
}
*/
ul#MenuBar9 a{
	background-color:transparent;
}
ul#MenuBar9 li{
	background-image: url(images/itemgradient-hover.gif);
	
}
ul#MenuBar9 li a{
	color:#FFF;	
}
ul#MenuBar9 li li{
	background-image: url(images/itemgradient.gif);
}

ul#MenuBar9 li li a{
	color:#000;
}
ul#MenuBar9 li li li{
	background-image: url(images/itemgradient-hover.gif);
}
ul#MenuBar9 li li li a{
	color:#FFF;	
}
ul#MenuBar9 a.MenuBarItemHover, ul#MenuBar9 a.MenuBarItemSubmenuHover, ul#MenuBar9 a.MenuBarSubmenuVisible{
	color:#33CCFF;
	}
-->
</style>
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="../../widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script src="../../widgets/menubar/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<h3>Menu Bar Samples</h3>
<p>This page gives examples of how to style menu bars differently.</p>
<div>
 <hr />
 <p>This is a standard horizontal menu bar. The top level menu items are next to each other from left to right, then all other submenu items are stacked vertically.</p>
 <ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
   <ul>
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
   </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
   <ul>
    <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
     <ul>
      <li><a href="#">Item 3.1.1</a></li>
      <li><a href="#">Item 3.1.2</a></li>
     </ul>
    </li>
    <li><a href="#">Item 3.2</a></li>
    <li><a href="#">Item 3.3</a></li>
   </ul>
  </li>
  <li><a href="#">Item 4</a></li>
 </ul>
</div>
<div>
 <hr />
 <p>This is a standard vertical menu bar. All menu items are stacked vertically.</p>
 <ul id="MenuBar2" class="MenuBarVertical">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
   <ul>
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
   </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
   <ul>
    <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
     <ul>
      <li><a href="#">Item 3.1.1</a></li>
      <li><a href="#">Item 3.1.2</a></li>
     </ul>
    </li>
    <li><a href="#">Item 3.2</a></li>
    <li><a href="#">Item 3.3</a></li>
   </ul>
  </li>
  <li><a href="#">Item 4</a></li>
 </ul>
 <p>You can navigate through the menu's items using also navigation keys. The default key for navigation are the Up/Down and Right/Left keys, but you can specify any key for navigation.</p>
</div>
<div>
 <hr />
 <p>This is a menu bar with a background image rather than just background  
  color for each menu item.</p>
 <ul id="MenuBar3" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
   <ul>
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
   </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
   <ul>
    <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
     <ul>
      <li><a href="#">Item 3.1.1</a></li>
      <li><a href="#">Item 3.1.2</a></li>
     </ul>
    </li>
    <li><a href="#">Item 3.2</a></li>
    <li><a href="#">Item 3.3</a></li>
   </ul>
  </li>
  <li><a href="#">Item 4</a></li>
 </ul>
</div>
<div>
 <hr />
 <p>This is a menu bar with wider menu items.</p>
 <ul id="MenuBar4" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
   <ul>
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
   </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
   <ul>
    <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
     <ul>
      <li><a href="#">Item 3.1.1</a></li>
      <li><a href="#">Item 3.1.2</a></li>
     </ul>
    </li>
    <li><a href="#">Item 3.2</a></li>
    <li><a href="#">Item 3.3</a></li>
   </ul>
  </li>
  <li><a href="#">Item 4</a></li>
 </ul>
</div>
<div>
 <hr />
 <p>This is a menu bar with menu items that only take up the space they need and are not a fixed width.</p>
 <ul id="MenuBar5" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
   <ul>
    <li><a href="#">Longer Name for Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
   </ul>
  </li>
  <li><a href="#">Longer Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Longer Still Item 3</a>
   <ul>
    <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
     <ul>
      <li><a href="#">Item 3.1.1</a></li>
      <li><a href="#">Item 3.1.2</a></li>
     </ul>
    </li>
    <li><a href="#">Item 3.2</a></li>
    <li><a href="#">Item 3.3</a></li>
   </ul>
  </li>
  <li><a href="#">Item 4</a></li>
 </ul>
</div>
<div>
 <hr />
 <p>This is a menu bar which uses another icon to describe when there is a submenu and positions it on the left side of the text.</p>
 <ul id="MenuBar6" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
   <ul>
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
   </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
   <ul>
    <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
     <ul>
      <li><a href="#">Item 3.1.1</a></li>
      <li><a href="#">Item 3.1.2</a></li>
     </ul>
    </li>
    <li><a href="#">Item 3.2</a></li>
    <li><a href="#">Item 3.3</a></li>
   </ul>
  </li>
  <li><a href="#">Item 4</a></li>
 </ul>
</div>
<div>
 <hr />
 <p>This is a menu bar which uses icons to call out certain menu items.</p>
 <ul id="MenuBar7" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#"><span id="item1">Item 1</span></a>
   <ul>
    <li><a href="#"><span id="item1-1">Item 1.1</span></a></li>
    <li><a href="#"><span id="item1-2">Item 1.2</span></a></li>
    <li><a href="#"><span id="item1-3">Item 1.3</span></a></li>
   </ul>
  </li>
  <li><a href="#"><span id="item2">Item 2</span></a></li>
  <li><a class="MenuBarItemSubmenu" href="#"><span id="item3">Item 3</span></a>
   <ul>
    <li><a class="MenuBarItemSubmenu" href="#"><span id="item3-1">Item 3.1</span></a>
     <ul>
      <li><a href="#"><span id="item3-1-1">Item 3.1.1</span></a></li>
      <li><a href="#"><span id="item3-1-2">Item 3.1.2</span></a></li>
     </ul>
    </li>
    <li><a href="#"><span id="item3-2">Item 3.2</span></a></li>
    <li><a href="#"><span id="item3-3">Item 3.3</span></a></li>
   </ul>
  </li>
  <li><a href="#"><span id="item4">Item 4</span></a></li>
 </ul>
</div>
<div>
 <hr />
<p>The next menu have different background colors depending the itmes level. </p>
<ul id="MenuBar8" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
      <ul>
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
      </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3.2</a></li>
        <li><a href="#">Item 3.3</a></li>
      </ul>
  </li>
  <li><a href="#">Item 4</a></li>
</ul>
</div>
<div>
<hr/>
<p>This example shows how to use background images for each item level.</p>
<ul id="MenuBar9" class="MenuBarVertical">
  <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
      <ul>
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
      </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
            <ul>
              <li><a href="#">Item 3.1.1</a></li>
              <li><a href="#">Item 3.1.2</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3.2</a></li>
        <li><a href="#">Item 3.3</a></li>
      </ul>
  </li>
  <li><a href="#">Item 4</a></li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../../widgets/menubar/SpryMenuBarDownHover.gif", imgRight:"../../widgets/menubar/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"../../widgets/menubar/SpryMenuBarRightHover.gif"});
var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgDown:"../../widgets/menubar/SpryMenuBarDownHover.gif", imgRight:"../../widgets/menubar/SpryMenuBarRightHover.gif"});
var MenuBar4 = new Spry.Widget.MenuBar("MenuBar4", {imgDown:"../../widgets/menubar/SpryMenuBarDownHover.gif", imgRight:"../../widgets/menubar/SpryMenuBarRightHover.gif"});
var MenuBar5 = new Spry.Widget.MenuBar("MenuBar5", {imgDown:"../../widgets/menubar/SpryMenuBarDownHover.gif", imgRight:"../../widgets/menubar/SpryMenuBarRightHover.gif"});
var MenuBar6 = new Spry.Widget.MenuBar("MenuBar6", {imgDown:"../../widgets/menubar/SpryMenuBarDownHover.gif", imgRight:"../../widgets/menubar/SpryMenuBarRightHover.gif"});
var MenuBar7 = new Spry.Widget.MenuBar("MenuBar7", {imgDown:"../../widgets/menubar/SpryMenuBarDownHover.gif", imgRight:"../../widgets/menubar/SpryMenuBarRightHover.gif"});
var MenuBar8 = new Spry.Widget.MenuBar("MenuBar8", {imgDown:"../../widgets/menubar/SpryMenuBarDownHover.gif", imgRight:"../../widgets/menubar/SpryMenuBarRightHover.gif"});
var MenuBar9 = new Spry.Widget.MenuBar("MenuBar9", {imgRight:"../../widgets/menubar/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
